<template>
  <div>
    <h1>主页面</h1>
    <button @click="currentView = 'landlord'">显示房东</button>
    <button @click="currentView = 'tenant'">显示租户</button>
    <button @click="currentView = 'contract'">显示合同</button>

    <component :is="currentViewComponent" />
  </div>
</template>

<script>
import Landlord from './Landlord.vue';
import Tenant from './Tenant.vue';
import Contract from './Contract.vue';

export default {
  name: 'MainPage',
  data() {
    return {
      currentView: 'landlord'
    };
  },
  computed: {
    currentViewComponent() {
      switch (this.currentView) {
        case 'tenant':
          return Tenant;
        case 'contract':
          return Contract;
        default:
          return Landlord;
      }
    }
  },
  components: {
    Landlord,
    Tenant,
    Contract
  }
};
</script>

<style>
/* Add styles here */
</style>
